CSS முக்கோணவியல் செயல்பாடுகள்: கணித தளவமைப்பு கணக்கீடுகளில் தேர்ச்சி பெறுதல்

CSS முக்கோணவியல் செயல்பாடுகள், அதாவது sin(), cos(), மற்றும் tan(), வலை தளவமைப்பை அணுகும் விதத்தில் புரட்சியை ஏற்படுத்தியுள்ளன. CSS கணித செயல்பாடுகளின் பெரிய குடும்பத்தின் ஒரு பகுதியான இந்த செயல்பாடுகள், ஒரு வலைப்பக்கத்தில் உள்ள கூறுகளின் நிலை, அளவு மற்றும் சுழற்சியைக் கட்டுப்படுத்த ஒரு சக்திவாய்ந்த மற்றும் துல்லியமான வழியை வழங்குகின்றன, இது பார்வைக்கு பிரமிக்க வைக்கும் மற்றும் மிகவும் பதிலளிக்கக்கூடிய வடிவமைப்புகளுக்கு வழிவகுக்கிறது. இந்த கட்டுரை CSS முக்கோணவியல் செயல்பாடுகளின் அடிப்படைகள், அவற்றின் நடைமுறை பயன்பாடுகள் மற்றும் மேம்பட்ட தளவமைப்பு கட்டுப்பாட்டிற்காக அவற்றை உங்கள் திட்டங்களில் எவ்வாறு ஒருங்கிணைப்பது என்பது குறித்து உங்களுக்கு வழிகாட்டும்.

முக்கோணவியல் செயல்பாடுகளைப் புரிந்துகொள்ளுதல்

CSS இல் மூழ்குவதற்கு முன், முக்கோணவியலின் முக்கிய கருத்துகளை சுருக்கமாக மதிப்பாய்வு செய்வோம். ஒரு செங்கோண முக்கோணத்தில்:

• சைன் (sin): கோணத்திற்கு எதிரே உள்ள பக்கத்தின் நீளத்திற்கும் கர்ணத்தின் நீளத்திற்கும் உள்ள விகிதம்.
• கோசைன் (cos): கோணத்திற்கு அடுத்துள்ள பக்கத்தின் நீளத்திற்கும் கர்ணத்தின் நீளத்திற்கும் உள்ள விகிதம்.
• டேன்ஜென்ட் (tan): கோணத்திற்கு எதிரே உள்ள பக்கத்தின் நீளத்திற்கும் கோணத்திற்கு அடுத்துள்ள பக்கத்தின் நீளத்திற்கும் உள்ள விகிதம்.

இந்த செயல்பாடுகள் ஒரு கோணத்தை (பொதுவாக ரேடியன்கள் அல்லது டிகிரிகளில்) உள்ளீடாக எடுத்து -1 மற்றும் 1 (sin மற்றும் cos க்கு) அல்லது எந்தவொரு மெய் எண்ணையும் (tan க்கு) மதிப்பை வழங்கும். CSS இந்த திரும்பிய மதிப்புகளைப் பயன்படுத்தி கூறுகளின் காட்சி பண்புகளை பாதிக்கும் கணக்கீடுகளைச் செய்கிறது.

CSS முக்கோணவியல் செயல்பாடுகள்: அடிப்படைகள்

CSS இந்த முக்கோணவியல் செயல்பாடுகளுக்கு நேரடி அணுகலை வழங்குகிறது, இது உங்கள் ஸ்டைல்ஷீட்களில் கணக்கீடுகளைச் செய்ய உங்களை அனுமதிக்கிறது. தொடரியல் நேரடியானது:

• sin(angle): கோணத்தின் சைனை வழங்கும்.
• cos(angle): கோணத்தின் கோசைனை வழங்கும்.
• tan(angle): கோணத்தின் டேன்ஜென்டை வழங்கும்.

angle டிகிரி (deg), ரேடியன்ஸ் (rad), கிரேடியன்ஸ் (grad) அல்லது திருப்பங்கள் (turn) ஆகியவற்றில் குறிப்பிடப்படலாம். நீங்கள் தேர்ந்தெடுக்கும் அலகுடன் நிலையாக இருப்பது மிக முக்கியம். உதாரணமாக:

            
.element {
  width: calc(100px * cos(45deg));
  height: calc(100px * sin(45deg));
}

            

              
                Copy
              
            
          

இந்த குறியீடு துணுக்கு 45 டிகிரியின் கோசைன் மற்றும் சைனின் அடிப்படையில் ஒரு உறுப்பின் அகலம் மற்றும் உயரத்தை கணக்கிடுகிறது. இதன் விளைவாக அகலம் மற்றும் உயரம் இரண்டுக்கும் தோராயமாக 70.71px இருக்கும்.

CSS முக்கோணவியல் செயல்பாடுகளின் நடைமுறை பயன்பாடுகள்

CSS முக்கோணவியல் செயல்பாடுகள் பரந்த அளவிலான ஆக்கப்பூர்வமான சாத்தியங்களைத் திறக்கின்றன. சில நடைமுறை பயன்பாடுகள் இங்கே:

1. வட்ட தளவமைப்புகள்

வட்ட தளவமைப்புகளை உருவாக்குவது முக்கோணவியல் செயல்பாடுகளுக்கான ஒரு உன்னதமான பயன்பாட்டு நிகழ்வு ஆகும். sin() மற்றும் cos() ஐப் பயன்படுத்தி ஒரு மைய புள்ளியைச் சுற்றி கூறுகளை அவற்றின் x மற்றும் y ஆயங்களை கணக்கிடுவதன் மூலம் நிலைநிறுத்தலாம்.

உதாரணம்: வட்ட மெனுவை உருவாக்குதல்

மெனு உருப்படிகள் ஒரு மைய பொத்தானைச் சுற்றி அமைக்கப்பட்ட ஒரு வட்ட மெனுவை நீங்கள் உருவாக்க விரும்புகிறீர்கள் என்று கற்பனை செய்து பாருங்கள். இதை நீங்கள் எப்படி அடையலாம் என்பது இங்கே:

            
<div class="menu-container">
  <button class="menu-toggle">Menu</button>
  <button class="menu-item">Item 1</button>
  <button class="menu-item">Item 2</button>
  <button class="menu-item">Item 3</button>
  <button class="menu-item">Item 4</button>
</div>

            

              
                Copy
              
            
          

            
.menu-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.menu-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.menu-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Initially hide the items */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-container.open .menu-item {
    opacity: 1; /* Make them visible when menu is open */
}

/* Using CSS variables for easy customization */
:root {
    --menu-radius: 80px; /* Radius of the circle */
    --number-of-items: 4; /* Number of menu items */
}

/* Dynamically calculate position using trigonometric functions */
.menu-item:nth-child(2) {
    --angle: calc(360deg / var(--number-of-items) * 0); /*First item starts at 0 degrees*/
    left: calc(50% + var(--menu-radius) * cos(var(--angle)));
    top: calc(50% + var(--menu-radius) * sin(var(--angle)));
}

.menu-item:nth-child(3) {
    --angle: calc(360deg / var(--number-of-items) * 1);
    left: calc(50% + var(--menu-radius) * cos(var(--angle)));
    top: calc(50% + var(--menu-radius) * sin(var(--angle)));
}

.menu-item:nth-child(4) {
    --angle: calc(360deg / var(--number-of-items) * 2);
    left: calc(50% + var(--menu-radius) * cos(var(--angle)));
    top: calc(50% + var(--menu-radius) * sin(var(--angle)));
}

.menu-item:nth-child(5) {
    --angle: calc(360deg / var(--number-of-items) * 3);
    left: calc(50% + var(--menu-radius) * cos(var(--angle)));
    top: calc(50% + var(--menu-radius) * sin(var(--angle)));
}

            

              
                Copy
              
            
          

இந்த CSS வட்டத்தின் ஆரம் மற்றும் மெனு உருப்படிகளின் எண்ணிக்கையை வரையறுக்க CSS மாறிகளைப் பயன்படுத்துகிறது. ஒவ்வொரு உருப்படியையும் மைய பொத்தானைச் சுற்றி நிலைநிறுத்த cos() மற்றும் sin() ஐப் பயன்படுத்தி left மற்றும் top பண்புகள் கணக்கிடப்படுகின்றன. nth-child தேர்வி ஒவ்வொரு மெனு உருப்படிக்கும் இந்த கணக்கீடுகளைத் தனித்தனியாகப் பயன்படுத்த உங்களை அனுமதிக்கிறது. JavaScript ஐப் பயன்படுத்தி, கிளிக் செய்தவுடன் .menu-container இல் "open" வகுப்பை எளிதாகச் சேர்த்து, தெரிவுநிலையை மாற்றலாம்.

2. அலை அலையான அனிமேஷன்கள்

மென்மையான, இயற்கையான அலை அலையான அனிமேஷன்களை உருவாக்க முக்கோணவியல் செயல்பாடுகள் சிறந்தவை. sin() அல்லது cos() உடன் transform: translateY() பண்பைக் கையாளுவதன் மூலம், கூறுகளை ஒரு அலை போன்ற இயக்கத்தில் மேலும் கீழும் நகர்த்தலாம்.

உதாரணம்: அலை அலையான உரை அனிமேஷனை உருவாக்குதல்

ஒவ்வொரு எழுத்தும் ஒரு சைனூசாய்டல் வடிவத்தில் செங்குத்தாக நகரும் ஒரு அலை அலையான உரை அனிமேஷனை எவ்வாறு உருவாக்குவது என்பது இங்கே:

            
<div class="wavy-text">
  <span style="--delay: 0.1s">H</span>
  <span style="--delay: 0.2s">e</span>
  <span style="--delay: 0.3s">l</span>
  <span style="--delay: 0.4s">l</span>
  <span style="--delay: 0.5s">o</span>
</div>

            

              
                Copy
              
            
          

            
.wavy-text {
  display: flex;
}

.wavy-text span {
  display: inline-block;
  animation: wave 1s infinite alternate;
  /* Use CSS variables for individual delays */
  animation-delay: var(--delay);
}

@keyframes wave {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

            

              
                Copy
              
            
          

            
/* More complex wavy animation using CSS variables and sin() */
@keyframes wave {
    0% {
        transform: translateY(calc(5px * sin(0)));
    }
    100% {
        transform: translateY(calc(5px * sin(360deg)));
    }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், ஒவ்வொரு எழுத்தும் span உறுப்பில் மூடப்பட்டிருக்கும், மேலும் அனிமேஷனை தடுமாறச் செய்ய CSS மாறி --delay பயன்படுத்தப்படுகிறது. wave முக்கிய பிரேம்கள் sin() ஐப் பயன்படுத்தி translateY பண்பை அனிமேஷன் செய்கின்றன, இது ஒரு மென்மையான அலை அலையான இயக்கத்தை உருவாக்குகிறது. இதன் விளைவாக தலைப்புகள், அறிமுகங்கள் அல்லது ஊடாடும் கூறுகளுக்கு ஏற்ற ஒரு மென்மையான மற்றும் ஈர்க்கும் அனிமேஷனுடன் உரை உள்ளது.

3. ஆற்றல்மிக்க வடிவங்கள் மற்றும் வடிவங்கள்

கணிதவியல் சார்புகளைப் பயன்படுத்தி, சிக்கலான வடிவங்களையும், அமைப்புகளையும் உருவாக்க முடியும். அவற்றை CSS கிரேடியண்டுகளுடனும், மற்ற பண்புகளுடனும் இணைப்பதன் மூலம், தனித்துவமான காட்சி விளைவுகளை உருவாக்கலாம்.

உதாரணம்: ஸ்டார்பர்ஸ்ட் வடிவத்தை உருவாக்குதல்

CSS கிரேடியண்டுகள் மற்றும் முக்கோணவியல் செயல்பாடுகளைப் பயன்படுத்தி ஸ்டார்பர்ஸ்ட் வடிவத்தை எவ்வாறு உருவாக்குவது என்பது இங்கே:

            
<div class="starburst"></div>

            

              
                Copy
              
            
          

            
.starburst {
  width: 200px;
  height: 200px;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.8) 0deg, /* Almost transparent white */
    rgba(255, 255, 255, 0.8) calc(360deg / 16), /* Angle determines number of points */
    transparent calc(360deg / 16),
    transparent calc(360deg / 8) /* Gap between lines */
  );
  border-radius: 50%;
}

            

              
                Copy
              
            
          

மையத்திலிருந்து கதிர்வீச்சு செய்யும் தொடர்ச்சியான கோடுகளை உருவாக்க இந்த குறியீடு repeating-conic-gradient ஐப் பயன்படுத்துகிறது. சமச்சீர் ஸ்டார்பர்ஸ்ட் வடிவத்தை உருவாக்க கோணங்கள் கணக்கிடப்படுகின்றன. இந்த நுட்பத்தை கிரேடியன்ட் வண்ணங்கள், கோணங்கள் மற்றும் மீண்டும் மீண்டும் வரும் வடிவங்களை கையாளுவதன் மூலம் மிகவும் சிக்கலான மற்றும் நுட்பமான வடிவமைப்புகளை உருவாக்க நீட்டிக்க முடியும். `360deg / 16` மதிப்பை சரிசெய்வது நட்சத்திரத்தில் உள்ள புள்ளிகளின் எண்ணிக்கையை மாற்றுகிறது, மேலும் வண்ணங்களை சரிசெய்வது வெவ்வேறு காட்சி பாணிகளை உருவாக்குகிறது.

4. சிக்கலான வழிகளில் சுழலும் கூறுகள்

tan() செயல்பாடு, நிலையை நிர்ணயிப்பதற்கு நேரடியாகப் பயன்படுத்தப்படாவிட்டாலும், தெரிந்த பக்க நீளங்களின் அடிப்படையில் சுழற்சிக்கான கோணங்களைப் பெற வேண்டியிருக்கும் போது நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருக்கும். உதாரணமாக, ஒரு குறிப்பிட்ட இலக்கு இடத்திற்கு சுட்டிக்காட்டும் வகையில் நீங்கள் ஒரு உறுப்பை சுழற்ற விரும்பலாம்.

உதாரணம்: எலிக் கர்சரை நோக்கி அம்புக்குறியைச் சுழற்றுதல்

இந்த எடுத்துக்காட்டு சுட்டியின் நிலையைப் பெற JavaScript ஐப் பயன்படுத்துகிறது மற்றும் அம்புக்குறி உறுப்பு எப்போதும் கர்சரை சுட்டிக்காட்டும் வகையில் CSS ஐச் சுழற்றுகிறது. இதற்கு ஆர்க்டேன்ஜென்ட் பயன்படுத்தி தொடர்புடைய நிலைகளின் அடிப்படையில் கோணத்தைக் கணக்கிட வேண்டும்.

            
<div class="arrow-container">
  <div class="arrow"></div>
</div>

            

              
                Copy
              
            
          

            
.arrow-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid red;
  transform-origin: 50% 0%; /* Rotate around the base */
  transform: translate(-50%, -50%) rotate(0deg); /* Initial rotation */
}

            

              
                Copy
              
            
          

            
// JavaScript to handle the mouse movement and rotation
const arrow = document.querySelector('.arrow');
const arrowContainer = document.querySelector('.arrow-container');

arrowContainer.addEventListener('mousemove', (e) => {
  const containerRect = arrowContainer.getBoundingClientRect();
  const centerX = containerRect.left + containerRect.width / 2;
  const centerY = containerRect.top + containerRect.height / 2;

  const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;

  arrow.style.transform = `translate(-50%, -50%) rotate(${angle + 90}deg)`; // Adding 90deg to account for initial arrow direction
});

            

              
                Copy
              
            
          

அம்புக்குறி கொள்கலனின் மையத்திற்கும் சுட்டி நிலைக்கும் இடையிலான கோணத்தை Math.atan2 ஐப் பயன்படுத்தி JavaScript கணக்கிடுகிறது, இது ஆர்க்டேன்ஜென்ட்டைப் போன்றது, ஆனால் அனைத்து காற்பகுதிகளையும் சரியாகக் கையாளுகிறது. இதன் விளைவாக டிகிரிக்கு மாற்றப்பட்டு அம்புக்குறியைச் சுழற்றி கர்சரை நோக்கிச் செல்லும்படி CSS மாற்றமாகப் பயன்படுத்தப்படுகிறது. transform-origin அம்புக்குறி அடிப்பகுதியைச் சுற்றி சுழற்சி நடைபெறுவதை உறுதி செய்ய அமைக்கப்பட்டுள்ளது.

கருத்தில் கொள்ள வேண்டியவை மற்றும் சிறந்த நடைமுறைகள்

• செயல்திறன்: சிக்கலான கணக்கீடுகள் செயல்திறனை பாதிக்கலாம், குறிப்பாக பழைய சாதனங்களில். இந்த செயல்பாடுகளை விவேகத்துடன் பயன்படுத்தவும், முடிந்தவரை உங்கள் குறியீட்டை மேம்படுத்தவும்.
• படிக்கும் திறன்: கணிதவியல் சமன்பாடுகளைப் படிப்பது கடினமாக இருக்கலாம். உங்கள் குறியீட்டின் தெளிவை மேம்படுத்த CSS மாறிகளையும் கருத்துகளையும் பயன்படுத்தவும்.
• அணுகல்தன்மை: உங்கள் வடிவமைப்புகள் ஊனமுற்ற பயனர்களுக்கு அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யவும். முக்கோணவியல் செயல்பாடுகளைப் பயன்படுத்தி உருவாக்கப்பட்ட காட்சி விளைவுகளை மட்டும் நம்ப வேண்டாம்; அதே தகவல் அல்லது செயல்பாட்டை அணுகுவதற்கு மாற்று வழிகளை வழங்கவும்.
• உலாவி இணக்கத்தன்மை: முக்கோணவியல் செயல்பாடுகளுக்கு நல்ல உலாவி ஆதரவு இருந்தாலும், உங்கள் வடிவமைப்புகள் நிலையான முடிவுகளை உறுதி செய்ய வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் எப்போதும் சோதிக்கவும்.
• CSS மாறிகள்: உங்கள் குறியீட்டை மேலும் பராமரிக்கக்கூடியதாகவும், தனிப்பயனாக்கக்கூடியதாகவும் மாற்ற CSS மாறிகளைப் பயன்படுத்தவும். இது ஆரம், கோணங்கள் மற்றும் ஆஃப்செட்கள் போன்ற அளவுருக்களை முக்கிய கணக்கீடுகளை மாற்றாமல் எளிதாக சரிசெய்ய உங்களை அனுமதிக்கிறது.
• அலகுகள்: நீங்கள் பயன்படுத்தும் அலகுகளை (deg, rad, grad, turn) கவனத்தில் கொள்ளுங்கள், மேலும் உங்கள் குறியீடு முழுவதும் நிலைத்தன்மையை உறுதிப்படுத்தவும்.

உலகளாவிய கண்ணோட்டங்களும் பயன்பாட்டு நிகழ்வுகளும்

கணிதவியல் தளவமைப்பின் கோட்பாடுகள் உலகளவில் பொருந்தும், ஆனால் அவற்றின் செயல்படுத்தல் கலாச்சார மற்றும் வடிவமைப்பு விருப்பங்களைப் பொறுத்து மாறுபடலாம். உதாரணமாக:

• வலமிருந்து இடமாக (RTL) மொழிகள்: RTL மொழிகளில் (எ.கா., அரபு, ஹீப்ரு) பணிபுரியும் போது, தளவமைப்பு சரியாக பிரதிபலிக்கப்படுவதை உறுதி செய்ய, உங்கள் கணக்கீடுகளின் கோணங்களையும் திசைகளையும் சரிசெய்ய வேண்டியிருக்கலாம். LTR மற்றும் RTL சூழல்களில் சரியான தளவமைப்பை உறுதி செய்ய தர்க்கரீதியான பண்புகளைப் (எ.கா., left மற்றும் right என்பதற்குப் பதிலாக start மற்றும் end) பயன்படுத்துவதைக் கவனியுங்கள்.
• வெவ்வேறு வடிவமைப்பு அழகியல்: வடிவமைப்பு அழகியல் கலாச்சாரங்களுக்கிடையே கணிசமாக வேறுபடுகிறது. சில பகுதிகளில் வட்ட தளவமைப்புகள் பிரபலமாக இருக்கலாம், மற்றவர்கள் அதிக நேரியல் அல்லது கட்டம் அடிப்படையிலான வடிவமைப்புகளை விரும்பலாம். உங்கள் இலக்கு பார்வையாளர்களின் குறிப்பிட்ட வடிவமைப்பு விருப்பங்களுக்கு ஏற்றவாறு உங்கள் முக்கோணவியல் செயல்பாடுகளின் பயன்பாட்டை மாற்றியமைக்கவும்.
• அணுகல்தன்மை கருத்தில் கொள்ள வேண்டியவை: அணுகல்தன்மை தரநிலைகள் மற்றும் வழிகாட்டுதல்கள் நாட்டிற்கு நாடு சற்று மாறுபடலாம். உங்கள் வடிவமைப்புகள் உங்கள் இலக்கு சந்தைகளில் உள்ள தொடர்புடைய அணுகல்தன்மை தரநிலைகளுக்கு இணங்குவதை உறுதிசெய்யவும்.

உதாரணம்: RTL மொழிகளுக்கான வட்ட மெனுவை மாற்றியமைத்தல்

ஒரு RTL மொழியில், ஒரு வட்ட மெனுவில் உள்ள மெனு உருப்படிகள் எதிர் திசையில் நிலைநிறுத்தப்பட வேண்டும். முக்கோணவியல் கணக்கீடுகளில் பயன்படுத்தப்படும் கோணங்களை வெறுமனே மாற்றுவதன் மூலமோ அல்லது முழு மெனுவையும் பிரதிபலிக்க CSS மாற்றங்களைப் பயன்படுத்துவதன் மூலமோ இதை அடையலாம்.

            
/* Add this to the .menu-container */
.menu-container[dir="rtl"] .menu-item {
    /* Option 1: Flip the calculations */
    /* left: calc(50% - var(--menu-radius) * cos(var(--angle)));  */
    
    /* Option 2: Use transform: scaleX(-1)  */
    transform: translate(-50%, -50%) scaleX(-1); /* Ensure initial translation is accounted for */
}

            

              
                Copy
              
            
          

முடிவுரை

CSS முக்கோணவியல் செயல்பாடுகள் வலை வடிவமைப்பாளர்கள் மற்றும் டெவலப்பர்களுக்கான சாத்தியக்கூறுகளின் புதிய பரிமாணத்தைத் திறக்கின்றன. முக்கோணவியலின் அடிப்படைகளைப் புரிந்துகொள்வதன் மூலமும், அவற்றை CSS இல் எவ்வாறு பயன்படுத்துவது என்பதன் மூலமும், பார்வைக்கு பிரமிக்க வைக்கும், கணித துல்லியமான மற்றும் மிகவும் பதிலளிக்கக்கூடிய வடிவமைப்புகளை உருவாக்கலாம். நீங்கள் வட்ட தளவமைப்புகள், அலை அலையான அனிமேஷன்கள், ஆற்றல்மிக்க வடிவங்கள் அல்லது சிக்கலான சுழற்சிகளை உருவாக்கினாலும், இந்த செயல்பாடுகள் வலை வடிவமைப்பின் எல்லைகளைத் தள்ளுவதற்கும், ஈர்க்கும் பயனர் அனுபவங்களை வழங்குவதற்கும் தேவையான கருவிகளை வழங்குகின்றன.

இந்த நுட்பங்களுடன் பரிசோதனை செய்யுங்கள், முக்கோணவியல் செயல்பாடுகள் மற்றும் CSS பண்புகளின் வெவ்வேறு சேர்க்கைகளை ஆராய்ந்து, கணித தளவமைப்பு கணக்கீடுகளுக்குள் இருக்கும் முடிவற்ற ஆக்கப்பூர்வ திறனைக் கண்டறியுங்கள். CSS முக்கோணவியல் செயல்பாடுகளின் சக்தியைத் தழுவி, உங்கள் வலை வடிவமைப்புகளை அடுத்த கட்டத்திற்கு உயர்த்துங்கள்.